<script setup>
import {ref} from "vue";
import http from "@/request/http.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Back} from "@element-plus/icons-vue";

//const captchaUrl = ref("http://192.168.26.179:11001/api/captcha")
const captchaUrl = ref("http://localhost:10086/api/captcha")

const user = ref({
  'email': '',
  'password': '',
  'code': '',
});
const formRef = ref()
const loading = ref(false)
const rules = {
  "email": [
    {required: true, message: "不可为空", target: "blur"},
    {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "邮箱格式错误", target: "blur"}
  ],
  "password": [
    {required: true, message: "不可为空", target: "blur"},
    {pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,}$/, message: "至少8位数且包含字母、数字", target: "blur"}
  ],
  "code": [
    {required: true, message: "不可为空", target: "blur"}
  ]
}

//登录
const login = () => {
  formRef.value.validate(async val => {
    if (val) {
      loading.value = true
      const dataVo = await http.post("/user/getToken", user.value)
      loading.value = false
      let code = dataVo.code
      if (code === 200) {
        ElMessage.success("登录成功")
        sessionStorage.setItem("token", dataVo.data.token)
        sessionStorage.setItem("isLogged", true)
        sessionStorage.setItem("role", dataVo.data.role)
        router.push("/").then()
      } else {
        ElMessage.error(dataVo.msg)
      }
    } else {
      ElMessage.error("请正确填写表单")
    }
  })
}
</script>

<template>
  <el-form ref="formRef"
           :loading="loading"
           :model="user"
           :rules="rules"
           class="login-form"
           element-loading-text="登陆中..."
  >
    <el-icon class="back" size="20" @click="router.push('/')">
      <Back/>
    </el-icon>
    <h1 class="form-title">登录</h1>
    <el-form-item label="邮箱:" label-position="left" label-width="70px" prop="email">
      <el-input v-model="user.email" class="el-input"/>
    </el-form-item>
    <el-form-item label="密码:" label-position="left" label-width="70px" prop="password">
      <el-input v-model="user.password" class="el-input" type="password"/>
    </el-form-item>
    <el-form-item label="验证码:"
                  label-position="left"
                  label-width="70px"
                  prop="code"
                  style="display: flex;justify-content: space-between">
      <el-input v-model="user.code" class="el-input" style="width: 230px"/>
      <el-image :src="captchaUrl"
                show-progress
                style="width: 80px;height: 40px; background-color: #409eff"
                @click="captchaUrl = captchaUrl+'?time=' + new Date().getTime()"
      />
    </el-form-item>
    <div style="display: flex;justify-content: space-between">
      <router-link class="registerLink" to="/register">注册账号</router-link>
      <router-link class="registerLink" to="/resetPassword">重置密码</router-link>
    </div>
    <el-button class="login-button" type="primary" @click="login">
      登录
    </el-button>
    <router-link to="/emailLogin">
      <el-button class="email-button" type="default">
        邮件验证码登录
      </el-button>
    </router-link>
  </el-form>
</template>

<style scoped>
.login-form {
  width: 460px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  /* 柔和阴影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
  transition: transform 0.3s ease-in-out;
}

.login-form:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 35px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* 按钮样式 */
.login-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  background-color: #E8770F;
  border-color: #E8770F;
  transition: all 0.3s ease-in-out;
}

.login-button:hover {
  transform: scale(1.02);
  background-color: #f8a050;
  border-color: #f8a050;
}

.email-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}

.email-button:hover {
  transform: scale(1.02);
  border-color: #f8a050;
  color: #f8851e;
  background-color: #faf0e6;
}

.el-input {
  height: 40px;
}

.registerLink {
  font-size: 15px;
  color: #409eff;
  margin-bottom: 8px;
}

.registerLink:hover {
  font-size: 15px;
  color: #0a81fb;
  text-decoration: underline;
  margin-bottom: 8px;
}

.back {
  transition: all 0.15s linear;
}

.back:hover {
  transform: scale(1.2);
}
</style>